// https://www.npmjs.com/package/@uni-helper/unocss-preset-uni
import { presetUni } from "@uni-helper/unocss-preset-uni";
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  presets: [
    presetUni({
      attributify: {
        // prefix: 'fg-', // 如果加前缀，则需要在代码里面使用 `fg-` 前缀，如：<view fg-border="1px solid #000"></view>
        prefixedOnly: true,
      },
    }),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
      },
    }),
    // 支持css class属性化
    presetAttributify(),
  ],
  transformers: [
    // 启用指令功能：主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
    transformerDirectives(),
    // 启用 () 分组功能
    // 支持css class组合，eg: `<view class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</view>`
    transformerVariantGroup(),
  ],
  shortcuts: [
    {
      center: "flex justify-center items-center",
    },
  ],
  // 动态图标需要在这里配置，或者写在vue页面中注释掉
  safelist: ["i-carbon-code"],
  rules: [
    [
      "p-safe",
      {
        padding:
          "env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)",
      },
    ],
    ["pt-safe", { "padding-top": "env(safe-area-inset-top)" }],
    ["pb-safe", { "padding-bottom": "env(safe-area-inset-bottom)" }],
  ],
  theme: {
    colors: {
      /** 主题色，用法如: text-primary */
      primary: "var(--wot-color-theme,#0957DE)",
    },
    fontSize: {
      /** 提供更小号的字体，用法如：text-2xs */
      "2xs": ["20rpx", "28rpx"],
      "3xs": ["18rpx", "26rpx"],
    },
  },
});
